<template>
  <div id="home">
    <nav-bar class="nav-home"><template v-slot:center>购物街</template></nav-bar>
    <tab-control class="tab-control" :ctitles="['流行','新款','精选']" ref="tabControl1"
                 @tabClick="tabClick" v-show="isTabFixed" ></tab-control>
    <scroll ref="scroll" class="home-content" :probe-type="3" :pull-up-load="true"
    @pullingUp="loadMore" @scroll="contentScroll">
      <home-swiper :cbanners="banners" @swiperImageLoad="swiperImageLoad"></home-swiper>
      <home-recommend :cproducts="recommends"></home-recommend>
      <home-feature></home-feature>
      <!--<h3>首页</h3>-->
      <tab-control class="tab-control" :ctitles="['流行','新款','精选']" ref="tabControl2"
      @tabClick="tabClick" ></tab-control>
      <goods-list :goods="showGoods"></goods-list>
    </scroll>
    <back-top @click.native="backClick" v-show="isShowBackTop"></back-top>
  </div>
</template>

<script>
  import NavBar from 'components/common/navbar/NavBar'
  import Scroll from "components/common/scroll/Scroll";
  import TabControl from "components/content/tabControl/TabControl";
  import GoodsList from "components/content/goods/GoodsList";
  import BackTop from "components/content/backTop/BackTop";

  import {getHomeMultidata,
          getGoodsData} from 'network/api/home'

  import HomeSwiper from './childComps/HomeSwiper'
  import HomeRecommend from "./childComps/HomeRecommend";
  import HomeFeature from "./childComps/HomeFeature";

  //常量放到一个js文件中
  import {POP,SELL,NEW} from "common/const";
  import {debounce} from "common/utils";
  import {itemListerMixin} from "common/mixin";

  export default {
        name: "Home",
        data() {
          return {
            result:null,
            banners:[],
            recommends:[],
            goods:{
              pop:{page:0,list:[]},
              new:{page:0,list:[]},
              sell:{page:0,list:[]}
            },
            currentType:POP,
            isShowBackTop:false,
            offsetTop:0,
            isTabFixed:false,
            saveY:0
          }
        },
        components:{
            BackTop,
            Scroll,
            GoodsList,
            TabControl,
            HomeFeature,
            HomeRecommend,
            NavBar,
            HomeSwiper
        },
        created() {
          this.getHomeMultidata();
          this.getHomeData(POP);
          this.getHomeData(NEW);
          this.getHomeData(SELL);
        },
        mixins:[itemListerMixin],
        mounted() {
          const refresh =  debounce(this.$refs.scroll.refresh,200)
          //监听item中图片加载完成
          this.$bus.$on('itemImageLoad',()=>{
              // console.log('----');
              // this.$refs.scroll.refresh()
              refresh()
          })
        },
        computed: {
          showGoods() {
            return this.goods[this.currentType].list
          }
        },
        destroyed() {
            // console.log('home destroyed');
        },
        //为了保持返回home页面的时候还保持着用户之前滑到的位置
        activated() {
          this.$refs.scroll.scrollTo(0,this.saveY,1)
          this.$refs.scroll.refresh()
        },
        deactivated() {
          this.saveY = this.$refs.scroll.getScrollY()
        },
        methods:{
          getHomeMultidata() {
              //请求多个数据
              getHomeMultidata().then(res => {
                  this.banners = res.data.banner.list;
                  this.recommends = res.data.recommend.list;
              })
          },
          getHomeData(type) {
            const page = this.goods[type].page+1;
            getGoodsData(type,page).then(res => {
                // for(let item of res.data.list){
                //     this.goods[type].list.push(item)
                // }
                //新语法，...可展开数组
                this.goods[type].list.push(...res.data.list)
                this.goods[type].page += 1;
                this.$refs.scroll.finishPullUp();
            })
          },
          tabClick(index) {
            switch (index) {
                case 0:
                  this.currentType = POP;
                  break;
                case 1:
                  this.currentType = NEW;
                  break;
                case 2:
                  this.currentType = SELL;
                  break;
            }
            this.$refs.tabControl1.currentIndex = index
            this.$refs.tabControl2.currentIndex = index
          },
          //home组件的scroll区域滚动要实时触发回调
          homeContentScroll(position) {
          },
          loadMore() {
            this.getHomeData(this.currentType)
            //刷新后，会重新计算可滚动高度，避免图片异步加载的滚动bug
            //方法1
            this.$refs.scroll.refresh()
          },
          backClick(){
            this.$refs.scroll.scrollTo(0,0)
          },
          contentScroll(position) {
            //1、判断backTop是否显示
            this.isShowBackTop = (-position.y) > 1000
            //2、决定tabControl是否吸顶(position:fixed)
            // console.log(-position.y)
            this.isTabFixed = (-position.y) > this.offsetTop
          },
          swiperImageLoad() {
              // console.log(this.$refs.tabControl2.$el.offsetTop);
              this.offsetTop = this.$refs.tabControl2.$el.offsetTop
          }
        }
    }
</script>

<style scoped>
  #home {
    /*padding-top: 44px;*/
  }
  .nav-home {
    background-color: var(--color-tint);
    color: #fff;
    /*在使用了better-scroll之后不再需要*/
    /*position: fixed;*/
    /*left: 0;*/
    /*right: 0;*/
    /*top: 0;*/
    /*z-index: 9;*/
    font-weight: 500;
  }
  /*.tab-control { 在better-scroll可滚动区域内后这个CSS3提供的吸顶效果就失效了
    position: sticky;
    top: 44px;
   }*/
   .tab-control {
     position: relative;
     z-index: 9;
   }
  .home-content {
    position: absolute;
    top: 44px;
    bottom: 49px;
    left: 0;
    right: 0;
    overflow: hidden;
  }
  /*.fixed {*/
    /*position: fixed;*/
    /*left: 0;*/
    /*right: 0;*/
    /*top: 44px;*/
  /*}*/
</style>
